<template>
	<view class="first-page">
		<view class="product-top">
			<image class="image" src="../../static/image/search.png"></image>
			<input class="input" v-model="utel">
			<view class="search">搜索</view>
		</view>
		<view class="Grid">
			<view class="Grid-Item" v-for="item in List" :key="item.id">
				<view class="GSimg"><image class="Image" :src="item.img"></image></view>
			    <view class="GStitle">{{ item.title }}</view>
			</view>
		</view>
		<view class="column">
				<!-- 内容的一个选项 -->
				<view class="info">
					<image mode="aspectFill" class="info-img" src="../../static/image/cdx.png"></image>
					<view class="info-title">炒代蟹</view>
					<button class="menu-add" size="mini" @click="addMenu(item.id)">下单</button>
					<view class="info-type">浙菜</view>
					<view class="info-desc">浙江菜，简称浙菜，是中国汉族八大菜系之一，其地山清水秀，物产丰富，故谚曰：“上有天堂，下有苏杭”。浙江省位于我国东海之滨，北部水道成网，素有鱼米之乡之称。西南丘陵起伏，盛产山珍野味。东部沿海渔场密布，水产资源丰富，有经济鱼类和贝壳水产品500余种，总产值居全国之首，物产丰富，佳肴自美，特色独具，有口皆碑。 </view>
				<view class="info">
					<image mode="aspectFill" class="info-img" src="../../static/image/ssgy.png.jpeg"></image>
					<view class="info-title">松鼠桂鱼</view>
					<button class="menu-add" size="mini" @click="addMenu(item.id)">下单</button>
					<view class="info-type">徽菜</view>
					<view class="info-desc">徽菜即安徽菜，是以皖南菜为代表的皖南菜、皖江菜、合肥菜、淮南菜、皖北菜的总称。其中皖南风味以徽州地方菜肴为代表，它是徽菜的主流和渊源。徽菜以徽州特产为主要原料，在采用民间传统烹调技法的基础上，吸收其它菜系技艺之长而烹制的以咸鲜味为主的地方菜肴。</view>
				</view>
			</view>
			<view class="column">
				<view class="info">
					<image mode="aspectFill" class="info-img" src="../../static/image/nrb.png.jpg"></image>
					<view class="info-title">牛肉堡</view>
					<button class="menu-add" size="mini" @click="addMenu(item.id)">下单</button>
					<view class="info-type">闽菜</view>
					<view class="info-desc">闽菜是中国八大菜系之一，历经中原汉族文化和闽越族文化的混合而形成。发源于福州，以福州菜为基础，后又融合闽东、闽南、闽西、闽北、莆仙五地风味菜形成的菜系。狭义闽菜指以福州菜，最早起源于福建福州闽县，后来发展成福州、闽南、闽西三种流派,即广义闽菜。闽菜以口味清鲜、和醇、荤香、多汤为主，擅红糟、糖醋调味。</view>
				</view>
				<view class="info">				
				<image mode="aspectFill" class="info-img" src="../../static/image/bqj.png"></image>
					<view class="info-title">白切鸡</view>
					<button class="menu-add" size="mini" @click="addMenu(item.id)">下单</button>
					<view class="info-type">湘菜</view>
					<view class="info-desc">湘菜，又叫湖南菜，是中国历史悠久的汉族八大菜系之一，早在汉朝就已经形成菜系。以湘江流域、洞庭湖区和湘西山区三种地方风味为主。</view>
				</view>
			</view>
			<view class="column">
				<view class="info">
					<image mode="aspectFill" class="info-img" src="../../static/image/djyt.png"></image>
					<view class="info-title">剁椒鱼头</view>
					<button class="menu-add" size="mini" @click="addMenu(item.id)">下单</button>
					<view class="info-type">粤菜</view>
					<view class="info-desc">粤菜即广东菜，是中国四大菜系、八大菜系之一。狭义上的粤菜指广府菜（即广州府菜），广义上又包含潮州菜（潮汕菜）、东江菜（也称客家菜）。</view>
				</view>
				<view class="info">
					<image mode="aspectFill" class="info-img" src="../../static/image/xlxlx.png"></image>
					<view class="info-title">香辣小龙虾</view>
					<button class="menu-add" size="mini" @click="addMenu(item.id)">下单</button>
					<view class="info-type">川菜</view>
					<view class="info-desc">川菜是中国汉族传统的四大菜系之一、中国八大菜系之一。川菜有着本土川菜与海派川菜之分，本土川菜中，四川菜系又包括川味菜肴、面点小吃、火锅等。</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		List:[
		{id:1,img:'../../static/image/take-out.png',title:'外卖'},
		{id:2,img:'../../static/image/vegetable.png',title:'蔬菜'},
		{id:3,img:'../../static/image/fruits.png',title:'水果'},
		{id:4,img:'../../static/image/meat.png',title:'肉类'},
   ]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
.first-page{
	background-color: yellow;
}
.product-top {
		//弹性容器
		display: flex;
		flex: 1;
		justify-content: space-between;
		height: 60rpx;
		//设置圆括号
		border-radius: 30rpx;
		//设置背景颜色
		background-color: #FFFAE8;
		border: 1rpx solid yellow;
		padding: 0rpx 10rpx;
		margin-top:10rpx;
		margin-bottom: 20rpx;
		.input {
		//弹性容器
		display: flex;
		flex: 1;
		justify-content: space-between;
		height: 60rpx;
		//设置圆括号
		border-radius: 30rpx;
		background-color: #FFFAE8;
		padding-left: 10rpx;
		padding-right: 10rpx;
		}
		.image {
			width: 50rpx;
			height: 50rpx;
			padding: 5rpx 0rpx;
			}
		.search {
			display: flex;
			justify-content: space-around;
			width: 100rpx;
			border-radius: 30rpx;
			background-color: yellow;
			margin: 10rpx 0rpx;
			padding: 5rpx 0rpx;
				}
	}
.Grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		background: #f7f7f7;
		padding:10rpx 0;
		.Grid-Item {
			width: 25%;
			height: 100rpx;
			text-align: center;
			//border:1rpx solid #ccc;
			box-sizing:border-box;
			.GSimg {
				width: 80rpx;
				height: 60rpx;
				margin-top: 10rpx;
				margin-left: 55rpx;
				.Image {
					width: 50rpx;
					height: 50rpx;
				}
			}
			.GStitle {
				width: 100%;
				height: 34rpx;
				line-height: 20rpx;
				color: #06121e;
				font-size: 10rpx;
				margin-top: 10rpx;
			}
		}
	}
/* .waterfull-page{
		display: flex;
		color: #8a8a8a;
	} */

.column {
		flex: 1;
		/* 		height: 500rpx; */
		border: 2rpx solid red;
		/* 内容居中 */
		display: flex;
		flex-direction: column;
		/* 水平居中 */
		/* justify-content: center; */
		/* 垂直居中 */
		align-items: center;
	}

	/* 设置info中电影选项内容 */
	.info {
		width: 90%;
		border: 1rpx solid #8a8a8a;
	}

	.info-img {
		width: 100%;
		height: 260rpx;
	}

	.info-title {
		font-weight: bold;
	}

	.info-type {
		margin-top: 10rpx;
		font-size: 12rpx;
	}

	.info-desc {
		margin-top: 20rpx;
		font-size: 12rpx;
	}

</style>